<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" type="image/png" href="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798798412521.png">
    <link rel="stylesheet" href="dm/css/swiper.min.css">
    <link rel="stylesheet" href="dm/css/animate.css">

    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="dm/css/zui.min.css">

    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="dm/lib/jquery/jquery.js"></script>
    <!-- <script src="dm/js/jquery.mobile-1.3.2.min.js"></script> -->

    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="dm/js/zui.min.js"></script>

    <script src="/js/qrcode.js"></script>
    <script src="/js/qrcode.min.js"></script>

    <!-- fullpage -->
    <script src="dm/js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="dm/css/jquery.fullpage.min.css" />
    <script src="dm/js/jquery.fullpage.min.js"></script>

    <!-- button -->
    <link rel="stylesheet" href="dm/css/button.css">


    <!-- iconfont -->
    <link rel="stylesheet" href="dm/fonts/iconfont.css">
    <script type="text/javascript" src="dm/fonts/iconfont.js"></script>


    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="dm/js/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="dm/css/jquery.fancybox.css" media="screen" />


    <script src="dm/js/wow.js"></script>
    <script src="dm/js/underscore-min.js"></script>


    <!-- mycss&js -->
    <script type="text/javascript" src="dm/js/myapp.js"></script>
    <link rel="stylesheet" href="dm/css/main.css">



    <!--[if lt IE 9]>
    <script src="dm/lib/ieonly/html5shiv.js"></script>
    <script src="dm/lib/ieonly/respond.js"></script>
    <script src="dm/lib/ieonly/excanvas.js"></script>
    <![endif]-->


    <!--[if lte IE 9]>
    <script src="dm/js/IE8hack.js"></script>
    <![endif]-->



    <!--[if lte IE 9]>
    <script src="dm/js/IEscript.js"></script>
    <![endif]-->

<!--    <script src="/js/jquery.min.js"></script>-->
    <script src="/js/jquery.util.Ajax.httpRequest.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            user-select:none;
        }
        .screen{
            position: absolute;
            top: 0;
            display:block;
            width: 100%;
            height: 100vh;
            z-index: 9999999;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .send{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 80px;
            line-height: 80px;
            background-color: rgba(10,10,10,0.6);
            text-align: center;
        }
        .input{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -20px -350px;
            font-size: 0;
        }
        .text{
            float: left;
            width: 600px;
            height: 40px;
            border: none;
            border-radius: 8px 0 0 8px;
        }
        .s_show div{
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color:#ffc751;
        }
        .btn{
            float: left;
            width: 100px;
            background-color:black;
            line-height: 40px;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            border-radius: 0 8px 8px 0;
        }
        html,body {
            margin:0;
            overflow:hidden;
            width:100%;
            height:100%;
            cursor:none;
            background:black;
            background:linear-gradient(to bottom,#000000 0%,#5788fe 100%);
        }
        .filter {
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            background:#fe5757;
            animation:colorChange 30s ease-in-out infinite;
            animation-fill-mode:both;
            mix-blend-mode:overlay;
        }
        @keyframes colorChange {
            0%,100% {
                opacity:0;
            }
            50% {
                opacity:.9;
            }
        }.landscape {
             position:absolute;
             bottom:0px;
             left:0;
             width:100%;
             height:100%;

             background-size:1000px 250px;
             background-repeat:repeat-x;
             background-position:center bottom;
         }
    </style>
    <title th:text="${title} + '!'"></title>
</head>
<body>

<div class="main-bg">



    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="main-box">
                    <div class="main-logo ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
                        <img src="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798798412521.png" alt="">
                    </div>
                    <div class="main-right">
                        <div class="main-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            云南特盖则科技有限公司
                        </div>
                        <div class="sub-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            YUNNAN TOGETHER Technology Co., Ltd
                        </div>
                        <div class="detail-box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            <ul>
                                <li>计算机软、硬件的开发及信息技术服务；</li>
                                <li>局域网系统集成；建筑智能化工程设计、施工；</li>
                                <li>安全技术防范工程设计、施工；</li>
                                <li>专业舞台灯光音响系统设计、施工；</li>
                                <li>专业数字化会议系统、无纸化系统设计、施工；</li>
                                <li>数据处理及储存服务；</li>
                                <li>智慧城市、智慧交通项目设计、施工；</li>
                                <li>智慧安防（监控、门禁、楼宇对讲、停车场管理、入侵报警）；室内外LED大屏设计、施工；</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


            <div class="swiper-slide">
                <div class="main-box">
                    <div class="main-logo ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
                        <img src="dm/img/logo3.png" alt="">
                    </div>
                    <div class="main-right">
                        <div class="main-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" style="margin-top:50px;">
                            云南雪飞翔信息科技有限公司
                        </div>
                        <div class="sub-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            YUNNAN XFX INFOMATION Technology Co., Ltd
                        </div>
                        <div class="detail-box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            专注工程造价软件20年，公司始终秉承“软件应用才有价值”为宗旨，以“诚信、高效、创新、服务”的经营理念，竭诚为建造人提供科学、高效的造价软件和优质贴心的服务。
                            </br>
                            </br>
                            雪飞翔清单计价软件、雪飞翔BIM算量软件、雪飞翔水利软件、雪飞翔土地整理软件等已成为云南省本土造价软件行业的领军软件。
                        </div>
                    </div>
                </div>
            </div>


            <div class="swiper-slide">
                <div class="main-box">
                    <div class="main-logo ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
                        <img src="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798517887056.png" alt="">
                    </div>
                    <div class="main-right">
                        <div class="main-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" style="margin-top:20px;">
                            苇杭教育科技(北京)有限公司
                        </div>
                        <div class="sub-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            WEIHANG Education Technology (Beijing) Co., Ltd
                        </div>
                        <div class="detail-box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            8年专注教育平台的高科技企业。苇杭教育科技（北京）有限公司成立于2009年，凭借着对“互联网+远程教育”的独特理解和专业的团队力量，依托“定制化、常态化、特产化” 远程教育产品服务体系，苇杭科技在教育平台搭建、服务器部署、教育/培训业务拓展等方面拥有大量成功案例。

                            </br>
                            </br>
                            <ul>
                                <li>培训业务：一级造价师，一级建造师，二级造价师，二级建造师，监理师等线上考前培训</li>
                                <li>BIM 业务：BIM一级，二级考证培训，BIM项目咨询，BIM3D动漫视频及BIM设计方案等业务</li>
                                <li>一级智能建造师考证培训</li>
                                <li>承接政府和企业的培训</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>



            <div class="swiper-slide">
                <div class="main-box">
                    <div class="main-logo ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
                        <img src="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/29/1672307702678732.png" alt="">
                    </div>
                    <div class="main-right">
                        <div class="main-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" style="margin-top:20px;">
                            昆明市宁海商会
                        </div>
                        <div class="sub-title ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            Kunming Ninghai Chamber of Commerce
                        </div>
                        <div class="detail-box ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s">
                            昆明市宁海商会是宁海企业家们心对心的交流的平台，在这里可以充分表达自己的愿望和呼声，可以在互利共赢的基础上让自己的事业更加美好。同时，这又是一个宽广的多元平台，一个让宁海商会能够资源共享、互利合作的平台，一个交融了乡情、友情和商情的平台，一个把握今天、走向未来的平台。我们相信，会有更多的人了解昆明市宁海商会，认可昆明市宁海商会，关注昆明市宁海商会，世人将会看到团结、互助、开放、创新的宁海商人新形象。
                        </div>
                    </div>
                </div>
            </div>



        </div>
        <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
    </div>

</div>


<div class="screen">
    <div class="main-logo" style="position:absolute;top:80px;left:80px;z-index:99">
        <img src="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717799295481470.png" alt="">
    </div>
    <div class="main-code" style="position:absolute;top:80px;right:80px;z-index:99;">
        <div id="qrcode" style="display:block;width:200px;height: 200px"></div>
<!--        <img src="dm/img/code.png" alt="" style="display:block;width:150px;">-->
        <div class="text" style="display:block;width:200px;font-size:18px;color:#fff;margin-top:10px;text-align:center;font-weight:600;">扫码送祝福</div>

    </div>

    <div class="landscape"></div>
    <div class="filter"  style="display:none"></div>
    <canvas id="canvas"></canvas>
    <div class="send" style="display: none">
        <div class="input clearfix">
            <input type="text" class="text" id="msg" placeholder='『赢战』2023，请发表您的祝福~'>
            <div class="btn">发送弹幕</div>
        </div>
    </div>
    <div class="s_show" th:each="info,infoStat : ${allBScreen}">
        <!--            <div class="magictime twisterInUp">祝贺云南特盖则科技有限公司年会圆满成功</div>-->
        <!--            <div class="magictime twisterInUp">新年新气象，业绩节节高</div>-->
        <!--            <div class="magictime twisterInUp">新年快乐，万事如意</div>-->
        <div class="magictime twisterInUp" th:text="${info.msg}" th:id="${info.id}"></div>
    </div>
</div>




<style>
    .twisterInUp{
        z-index: 99988;
    }
    .main-bg{
        height: 100vh;
        width: 100%;;
        background:url(https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/1671779782822198.png);
        background-position: 100%;
    }
    .main-bg .main-logo{
        width: 300px;
        float:left;
        margin-left:200px;
        text-align:center;

    }
    .main-bg .main-logo img{

    }
    .main-bg .main-title{
        font-size: 60px;
        color: #fff;;
        z-index: 999;
        font-weight: 600;
        text-align:left;

    }
    .main-bg .sub-title{
        font-size: 18px;
        color: #fff;;
        z-index: 999;
        font-weight: 100;
        margin-bottom:50px;
        text-align:left;
        text-transform: uppercase;
        word-spacing:10px;
        letter-spacing:6px;
        opacity: .9;
    }
    .main-video video{
        mix-blend-mode: screen;
        width: 800px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top:-400px;
        margin-left:-400px;
        opacity: .75;
    }

    .main-box{
        position: relative;
        top: 50%;
        margin-top: -165px;
        width: 80%;
        left: 50%;
        margin-left: -40%;
        height: 450px;
    }
    .detail-box{
        font-size:18px;
        color:#fff;
    }
    .main-right{
        float:left;
        width:calc(100% - 500px);
        padding-left:100px;

    }

    .swiper-container{
        height: 100vh;
    }
</style>


<!-- Initialize Swiper -->
<script src="dm/js/swiper.min.js "></script>
<script src="dm/js/swiper.animate.min.js "></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        autoplay: 30000,
        effect : 'fade',
        autoplayDisableOnInteraction: false,
        onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper) {
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });
</script>

<script>
    function Star(id, x, y){
        this.id = id;
        this.x = x;
        this.y = y;
        this.r = Math.floor(Math.random()*2)+1;
        var alpha = (Math.floor(Math.random()*10)+1)/10/2;
        this.color = "rgba(255,255,255,"+alpha+")";
    }

    Star.prototype.draw = function() {
        ctx.fillStyle = this.color;
        ctx.shadowBlur = this.r * 2;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
    }

    Star.prototype.move = function() {
        this.y -= .15;
        if (this.y <= -10) this.y = HEIGHT + 10;
        this.draw();
    }

    Star.prototype.die = function() {
        stars[this.id] = null;
        delete stars[this.id];
    }


    function Dot(id, x, y, r) {
        this.id = id;
        this.x = x;
        this.y = y;
        this.r = Math.floor(Math.random()*5)+1;
        this.maxLinks = 2;
        this.speed = .5;
        this.a = .5;
        this.aReduction = .005;
        this.color = "rgba(255,255,255,"+this.a+")";
        this.linkColor = "rgba(255,255,255,"+this.a/4+")";

        this.dir = Math.floor(Math.random()*140)+200;
    }

    Dot.prototype.draw = function() {
        ctx.fillStyle = this.color;
        ctx.shadowBlur = this.r * 2;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
    }

    Dot.prototype.link = function() {
        if (this.id == 0) return;
        var previousDot1 = getPreviousDot(this.id, 1);
        var previousDot2 = getPreviousDot(this.id, 2);
        var previousDot3 = getPreviousDot(this.id, 3);
        if (!previousDot1) return;
        ctx.strokeStyle = this.linkColor;
        ctx.moveTo(previousDot1.x, previousDot1.y);
        ctx.beginPath();
        ctx.lineTo(this.x, this.y);
        if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
        if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
        ctx.stroke();
        ctx.closePath();
    }

    function getPreviousDot(id, stepback) {
        if (id == 0 || id - stepback < 0) return false;
        if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
        else return false;//getPreviousDot(id - stepback);
    }

    Dot.prototype.move = function() {
        this.a -= this.aReduction;
        if (this.a <= 0) {
            this.die();
            return
        }
        this.color = "rgba(255,255,255,"+this.a+")";
        this.linkColor = "rgba(255,255,255,"+this.a/4+")";
        this.x = this.x + Math.cos(degToRad(this.dir))*this.speed,
            this.y = this.y + Math.sin(degToRad(this.dir))*this.speed;

        this.draw();
        this.link();
    }

    Dot.prototype.die = function() {
        dots[this.id] = null;
        delete dots[this.id];
    }


    var canvas  = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        WIDTH,
        HEIGHT,
        mouseMoving = false,
        mouseMoveChecker,
        mouseX,
        mouseY,
        stars = [],
        initStarsPopulation = 80,
        dots = [],
        dotsMinDist = 2,
        maxDistFromCursor = 50;

    setCanvasSize();
    init();

    function setCanvasSize() {
        WIDTH = document.documentElement.clientWidth,
            HEIGHT = document.documentElement.clientHeight;

        canvas.setAttribute("width", WIDTH);
        canvas.setAttribute("height", HEIGHT);
    }

    function init() {
        ctx.strokeStyle = "white";
        ctx.shadowColor = "white";
        for (var i = 0; i < initStarsPopulation; i++) {
            stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
            //stars[i].draw();
        }
        ctx.shadowBlur = 0;
        animate();
    }

    function animate() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);

        for (var i in stars) {
            stars[i].move();
        }
        for (var i in dots) {
            dots[i].move();
        }
        drawIfMouseMoving();
        requestAnimationFrame(animate);
    }

    window.onmousemove = function(e){
        mouseMoving = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
        clearInterval(mouseMoveChecker);
        mouseMoveChecker = setTimeout(function() {
            mouseMoving = false;
        }, 100);
    }


    function drawIfMouseMoving(){
        if (!mouseMoving) return;

        if (dots.length == 0) {
            dots[0] = new Dot(0, mouseX, mouseY);
            dots[0].draw();
            return;
        }

        var previousDot = getPreviousDot(dots.length, 1);
        var prevX = previousDot.x;
        var prevY = previousDot.y;

        var diffX = Math.abs(prevX - mouseX);
        var diffY = Math.abs(prevY - mouseY);

        if (diffX < dotsMinDist || diffY < dotsMinDist) return;

        var xVariation = Math.random() > .5 ? -1 : 1;
        xVariation = xVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
        var yVariation = Math.random() > .5 ? -1 : 1;
        yVariation = yVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
        dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
        dots[dots.length-1].draw();
        dots[dots.length-1].link();
    }
    //setInterval(drawIfMouseMoving, 17);

    function degToRad(deg) {
        return deg * (Math.PI / 180);
    }
</script>







<!--        th:inline="javascript"-->
<script th:inline="javascript">
    //生成二维码
    $('#qrcode').html('');
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 200,
        height : 200
    });
    qrcode.makeCode(window.location.href.split("/b-screen.html")[0] + "/b-screen-form.html");

    //模块化 每个功能函数去做自己相应的事情 代码可维护性 可扩展性
    //初始化函数
    var aShowList = document.querySelectorAll('.s_show div');//获取元素 H5
    var oShow = document.querySelector('.s_show');
    var oSend = document.querySelector('.send');
    var oBtn = document.querySelector('.btn');
    var oText = document.querySelector('.text');
    var time = 0;//上一次你发送的时间
    var time1 = 0;
    //点击发送弹幕

    //模拟获取websocket
    // setInterval(function(){
    //     var oDiv = document.createElement('div');//创建div
    //     oDiv.innerHTML = "随机数：" + Math.random();//添加弹幕内容
    //     oDiv.className = 'magictime twisterInUp';//弹幕特效
    //     oShow.appendChild(oDiv);//添加一个子节点
    //     init(oDiv);//初始化
    // }, 30000);

    oBtn.onclick = function(){//鼠标点击事件
        //oBtn.style.backgroundColor = randomColor();//按钮背景颜色变换
        time1 = new Date();
        oBtn.style.color = randomColor();//按钮字体颜色变换
        if(time1 - time > 500){//2次发送的时间必须大于2秒

            // var oDiv = document.createElement('div');//创建div
            // oDiv.innerHTML = oText.value;//添加弹幕内容
            // oDiv.className = 'magictime twisterInUp';//弹幕特效
            // oShow.appendChild(oDiv);//添加一个子节点
            // init(oDiv);//初始化
            $.httpRequestAsyncPost("/bscreen/addMsg",
                {msg:oText.value},
                function(result){
                    oText.value = '';
                    time = time1;
                    //console.log(time);
                    console.log(result);
                },
                function(result){
                    oText.value = '';
                    time = time1;
                    //console.log(time);
                    console.log(result);
                });


        }else{
            alert("请稍后再发~");

        }
    }

    for(var i = 0;i < aShowList.length;i++){
        init(aShowList[i]);//执行初始化函数
    }

    function init(obj){//接受弹幕对象
        //确定top值的随机区间
        var screenHeight = document.documentElement.clientHeight;//获取屏幕可视高度
        var maxTop = screenHeight - oSend.offsetHeight - obj.offsetHeight;//高度差范围
        obj.style.top = maxTop * Math.random() * Math.random() + 'px';
        //控制left值
        var screenWidth = document.documentElement.clientWidth;//获取可视宽度
        var maxLeft = screenWidth - obj.offsetWidth/* - Math.random() * 800 */;//随机宽度差
        obj.style.left = maxLeft + 'px';
        //弹幕的随机颜色
        obj.style.color = randomColor();
        /*setInterval(function(){
            move(obj,maxLeft);
        },1000);*///普通定时器
        move(Math.random()*5+1,obj,maxLeft);
    }
    //弹幕移动函数
    function move(k,obj,maxLeft){
        var speed = k;//控制速度的变量
        maxLeft -= speed;//往左移动
        if(maxLeft > -obj.offsetWidth){
            obj.style.left = maxLeft + 'px';
            requestAnimationFrame(function(){
                move(k,obj,maxLeft);
            });//H5新增的动画函数
        }else{
            init(obj);//重新初始化 营造循环弹幕效果
            /*oShow.removeChild(obj);//DOM删除子节点*/
            // $(obj).remove();
        }
    }
    //随机颜色函数
    function randomColor(){
        return '#FFC751'
        //return '#' + Math.random().toString(16).slice(-6);//一行简化版截取后六位
        // var str = '#';
        // for(var i = 0;i < 6;i++){
        //     str += Math.floor(Math.random() * 16).toString(16);
        // }
        // return str;//普通逻辑版
    }








    // var lastWebSocketTimeSec = new Date().getTime();
    // var timeOutNoSpeak = 8 * 60 * 1000 //8分钟不说话，机器说话
    var stompClient = null;
    //初始化websocket链接
    connect()
    function connect() {
        var socket = new SockJS(window.location.href.split("/b-screen.html")[0] + [[${endpoint}]]);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe([[${topicChannel}]], function (response) {
                //response.body
                if(response.body){
                    var bscreenEntity = JSON.parse(response.body)
                    console.log(bscreenEntity)

                    var id =  bscreenEntity.idStr
                    var msg =  bscreenEntity.msg
                    var isDeleted =  bscreenEntity.isDeleted
                    var status =  bscreenEntity.status
                    //删除
                    if(isDeleted == 1){
                        console.log("删除id:",id)
                        $("#"+id).remove();
                    }
                    //添加
                    else{
                       //有效
                       if(status == 1){
                           console.log("添加id:",id)
                           var oDiv = document.createElement('div');//创建div
                           oDiv.innerHTML = msg || ""//添加弹幕内容
                           oDiv.id = id//添加id
                           oDiv.className = 'magictime twisterInUp';//弹幕特效
                           oShow.appendChild(oDiv);//添加一个子节点
                           init(oDiv);//初始化
                           // lastWebSocketTimeSec = new Date().getTime()
                       }
                    }
                }
            });
        },{});
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }
    window.onunload = function(){
        //页面卸载
        disconnect()
    }
    //8分钟不说话，机器说话
    // setInterval(function(){
    //     var timeOutNoSpeakTmp = new Date().getTime() - lastWebSocketTimeSec
    //     if(timeOutNoSpeakTmp >= timeOutNoSpeak){
    //         var oDiv = document.createElement('div');//创建div
    //         oDiv.innerHTML = "咦， 『2023年会』这么高兴的事，你们怎么不理我了？";//添加弹幕内容
    //         oDiv.className = 'magictime twisterInUp';//弹幕特效
    //         oShow.appendChild(oDiv);//添加一个子节点
    //         init(oDiv);//初始化
    //
    //         var oDiv002 = document.createElement('div');//创建div
    //         oDiv002.innerHTML = "赶紧发表新年感想、奋斗目标，一起『赢战』2023 ^_^";//添加弹幕内容
    //         oDiv002.className = 'magictime twisterInUp';//弹幕特效
    //         oShow.appendChild(oDiv002);//添加一个子节点
    //         init(oDiv002);//初始化
    //     }
    // }, 120000);//2分钟定时任务

    $('#msg').keydown(function(e){
        if(e.keyCode==13){
            //oBtn.style.backgroundColor = randomColor();//按钮背景颜色变换
            time1 = new Date();
            oBtn.style.color = randomColor();//按钮字体颜色变换
            if(time1 - time > 500){//2次发送的时间必须大于2秒

                // var oDiv = document.createElement('div');//创建div
                // oDiv.innerHTML = oText.value;//添加弹幕内容
                // oDiv.className = 'magictime twisterInUp';//弹幕特效
                // oShow.appendChild(oDiv);//添加一个子节点
                // init(oDiv);//初始化
                $.httpRequestAsyncPost("/bscreen/addMsg",
                    {msg:oText.value},
                    function(result){
                        oText.value = '';
                        time = time1;
                        //console.log(time);
                        console.log(result);
                    },
                    function(result){
                        oText.value = '';
                        time = time1;
                        //console.log(time);
                        console.log(result);
                    });


            }else{
                alert("请稍后再发~");

            }
        }
    });

    //双击切换隐藏输入框
    $('body').dblclick(function (){
        $("div.send").toggle("slow")
    })
    $("#msg").focus();
</script>
</body>
</html>